<template>
  <div>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>问题间交叉分析</span>
          <div class="select">
            <div>
              <div>
                <!-- <span class="symbol_row"></span> -->
                <p class="text">
                  定义行<span class="tip"
                    >&nbsp;[需要分析的题目，如爱好，意愿等]</span
                  >
                </p>
              </div>
              <el-select
                v-model="value"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in this.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <div>
                <!-- <span class="symbol_row"></span> -->
                <p class="text">
                  定义列<span class="tip"
                    >&nbsp;[样本属性，如性别，年龄等]</span
                  >
                </p>
              </div>
              <el-select v-model="value1" placeholder="请选择">
                <el-option
                  v-for="item in this.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <el-button type="primary" class="start" @click="ana"
                >开始分析</el-button
              >
              <el-button type="info" @click="hide">隐藏图表</el-button>
            </div>
          </div>
        </div>
      </template>
      <div class="cross_one" v-if="this.page">
        <cross-one :series="this.series" :x_data="this.x_data"></cross-one>
      </div>
    </el-card>
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>随时间整体分析</span>
          <div class="select">
            <div>
              <div>
                <!-- <span class="symbol_row"></span> -->
                <p class="text">
                  定义时间单位<span class="tip"
                    >&nbsp;[需要分析的单位（年、月、日）]</span
                  >
                </p>
              </div>
              <el-select v-model="value1_year" placeholder="请选择">
                <el-option
                  v-for="item in this.options_year"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <div>
                <!-- <span class="symbol_row"></span> -->
                <p class="text">
                  定义列<span class="tip"
                    >&nbsp;[需要分析的题目，如爱好，意愿等]</span
                  >
                </p>
              </div>
              <el-select v-model="value_year" placeholder="请选择">
                <el-option
                  v-for="item in this.options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </div>
            <div>
              <el-button type="primary" class="start" @click="ana_year"
                >开始分析</el-button
              >
              <el-button type="info" @click="hide1">隐藏图表</el-button>
            </div>
          </div>
        </div>
      </template>
      <div class="cross_one" v-if="this.page1">
        <cross-year :source="this.source"></cross-year>
      </div>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
import CrossOne from "@/components/Analysis/charts/CrossOne";
import CrossYear from "@/components/Analysis/charts/CrossYear";
// import YearAnalysis from '@/components/Analysis/YearAnalysis'
export default {
  props: ["options"],
  components: { CrossOne, CrossYear },
  created() {
    console.log(this.options);
  },
  data() {
    return {
      options_year: [
        {
          value: "year",
          label: "年",
        },
        {
          value: "month",
          label: "月",
        },
        {
          value: "day",
          label: "日",
        },
      ],
      page: false,
      page1: false,
      value: "",
      value1: "",
      value_year: "",
      value1_year: "",
      x_data: null,
      series: [],
      source: null,
    };
  },
  methods: {
    show() {
      console.log(this.options);
    },
    ana() {
      console.log(this.value1);
      axios
        .post("cross_statistic/", {
          type: "1q_1q",
          xid: this.value,
          yid: this.value1,
        })
        .then((res) => {
          if (res.data.code === 0) {
            console.log(res);
            this.x_data = res.data.x_data;
            let obj = res.data.series;
            let list = [];
            console.log(this.x_data);
            console.log(this.series);
            Object.values(obj).forEach((ele) => {
              console.log(ele);
              list.push({
                data: ele["data"],
                name: ele["name"],
                type: "bar",
                barGap: 0,
                emphasis: {
                  focus: "series",
                },
              });
            });
            this.series = list;
            console.log(this.series);
          }
        });
      this.page = true;
    },
    ana_year() {
      this.page1 = true;
      console.log(this.value_year);
      console.log(this.value1_year);
      axios
        .post("cross_statistic/", {
          qid: this.value_year,
          type: "t_1q",
          time_type: this.value1_year,
        })
        .then((res) => {
          let list = {};
          list["source"] = res.data.source;
          this.source = list;
          console.log(list);
        });
    },
    hide() {
      this.page = false;
    },
    hide1() {
      this.page1 = false;
    },
  },
};
</script>

<style scoped>
.select {
  margin-left: 15%;
  margin-right: 15%;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
}
.tip {
  color: #aaa;
}
.start {
  margin-top: 26%;
}
.cross_one {
  margin-left: 15%;
  margin-right: 15%;
}
/* .symbol_row {
    border-left-width: 2px;
    border-left-style: solid;
    border-left-color: rgb(217, 217, 217);
    border-bottom-width: 2px;
    border-style: solid;
    border-bottom-color: rgb(0, 143, 255);
} */
</style>
